<template>
  <a-modal
    :open="visible"
    title="加钟"
    width="500px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-form-item label="技师信息" name="technicianInfo">
        <a-input
          v-model:value="formData.technicianInfo"
          disabled
          placeholder="技师信息"
        />
      </a-form-item>
      <a-form-item label="当前服务" name="currentService">
        <a-input
          v-model:value="formData.currentService"
          disabled
          placeholder="当前服务"
        />
      </a-form-item>
      <a-form-item label="加钟时长" name="addTime">
        <a-select v-model:value="formData.addTime" placeholder="请选择加钟时长">
          <a-select-option value="30">30分钟</a-select-option>
          <a-select-option value="60">60分钟</a-select-option>
          <a-select-option value="90">90分钟</a-select-option>
          <a-select-option value="120">120分钟</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="加钟原因" name="reason">
        <a-textarea
          v-model:value="formData.reason"
          :rows="3"
          placeholder="请输入加钟原因"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';

interface Technician {
  id: string;
  name: string;
  service: string;
  time: string;
  code: string;
}

interface Props {
  visible: boolean;
  technician?: Technician | null;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();
const formData = ref({
  technicianInfo: '',
  currentService: '',
  addTime: '',
  reason: '',
});

const rules = {
  addTime: [{ required: true, message: '请选择加钟时长' }],
  reason: [{ required: true, message: '请输入加钟原因' }],
};

// 监听技师变化
watch(
  () => props.technician,
  (technician) => {
    if (technician) {
      formData.value.technicianInfo = `${technician.id}-${technician.name}`;
      formData.value.currentService = technician.service;
    }
  },
  { immediate: true },
);

const handleOk = async () => {
  try {
    await formRef.value?.validate();
    message.success('加钟成功');
    emit('update:visible', false);
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>
